//  背景
.wn-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  .img {
    // width: ;
    max-width: 100%;
    width: 100%;
    height: 100%;
  }
}

// container
.wn-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 99;
  // background: red;
}

//   音频
.wn-audio {
  .wn-c-audio {
    position: absolute;
    z-index: -99;
  }
  .img {
    width: 4.5em;
    height: 4.5em;
    animation-name: myAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
}

//
.wn-views {
  //  标题
  .wn-title {
    .img {
      width: 54.5em;
      height: 11.5em;
    }
  }
  //
  .wn-ret-collect {
    gap: 2em;
    .wn-ret {
      width: 6em;
      height: 6em;
      border-radius: 500em;
      background: rgba($color: #eeeeee, $alpha: 0.3);
      .img {
        width: 2.5em;
        height: 2.5em;
      }
    }
    .wn-coll {
      .img {
        width: 4.5em;
        height: 4.5em;
      }
    }
  }
}

//  通知
.wn-notification {
  color: #fffedf;
  padding-top: 2em;
  padding-bottom: 2em;
  .text {
    letter-spacing: 0.1em;
  }
}

//  底部
.wn-bottom {
  //  按钮
  gap: 5em;
  margin-bottom: 10em;
  //  按钮
  .wn-s-btns {
    .img {
      width: 41.2em;
      height: 11.8em;
    }
  }
  //  文字
  .wn-setting-bg {
    gap: 1em;
    .wn-s-icon {
      width: 6em;
      height: 6em;
      border-radius: 500em;
      background: rgba($color: #eeeeee, $alpha: 0.3);
      .img {
        width: 3em;
        height: 2.2em;
      }
    }
    .wn-my-text {
      color: #fffedf;
    }
  }
}

//  滚动弹幕
.wn-roll-list {
  gap: 3em 4em;
  & .wn-roll-item:nth-child(1n) {
    animation-delay: 1s;
  }
  & .wn-roll-item:nth-child(2n) {
    animation-delay: 2s;
  }
  & .wn-roll-item:nth-child(3n) {
    animation-delay: 3s;
  }
  & .wn-roll-item:nth-child(4n) {
    animation-delay: 4.5s;
  }
  & .wn-roll-item:nth-child(5n) {
    animation-delay: 1.5s;
  }
  .hidden{
    position: absolute;
    top: 1000%;
  }
  .wn-roll-item {
    flex-shrink: 0;
    width: 30em;
    max-width: 52.1em;
    height: 19em;
    max-height: 9em;
    position: relative;
      padding: 0 2em;
    animation-name: MoveAnimation;
    animation-duration: 19s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    transform: translateX(-100%);
   
      .wn-roll-bg{
        width: 100%;
        height: 100%;
        position: absolute;
      }
    .images-bg{ 
        position: absolute;
        width: 90%;
        max-height: 100%;
    }
    .wn-roll-m1{
      width: 95%;
      height: 100%;
    }
  }

  .wn-roll-content {
    width: 100%;
    z-index: 99;
    gap: 1em;
    padding: 0 2em;
    .wn-head {
      width: min(40rpx, 50rpx);
      height: min(40rpx, 50rpx);
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .wn-roll-text {
      .text {
        font-size: 24rpx;
        color: #ffffe1;
        font-weight: 400;
      }
    }
    .wn-roll-right {
      .wn-roll-love {
        .img {
          width: 28rpx;
          height: 26rpx;
        }
      }
      .wn-roll-num {
        .text {
          font-weight: 400;
          font-size: 23rpx;
          color: #ffffe1;
        }
      }
    }
  }
}

//  停止动画
.stop-animation {
  animation-play-state: paused !important;
}
// 播放 动画
.play-animation {
  animation-play-state: running !important;
}

//  弹窗
.popov-views {
  display: grid;
  grid-template-rows: max-content 1fr;

  // 头部
  .p-head {
    padding: 2em 0;
    width: 100%;
    display: grid;
    grid-template-columns: 3em 1fr max-content 3em;
    grid-template-areas: "a b c d";
    justify-items: center;
    align-items: center;
    .p-head-title {
      grid-area: b;
    }
    .p-head-icon {
      grid-area: c;
      width: 3.8em;
      height: 3.8em;
      .img {
      }
    }
  }
  //
  .p-content {
    background: #f7f8fa;
    .p-scroll {
      .p-bg-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 2em 3em;
        .p-bg-item {
          margin: 1em;
          min-height: 30.5em;
          background: linear-gradient(to bottom, #c6c4e0, #fff);
          padding: 2em;
          display: grid;
          grid-template-rows: 1fr max-content;
          justify-items: center;
          align-items: center;
          .p-bg-images {
            width: 13em;
            height: 18em;
          }
          .p-bg-btns {
            //  装扮
            width: 14.3em;
            height: 4.6em;
            border-radius: 500em;
            display: grid;
            justify-items: center;
            align-items: center;
            //  border: ;
            border: 0.1em solid transparent;
            box-sizing: border-box;
            &.active {
              border-color: #8d86d5;
              background: #fff;
              color: #8d86d5;
            }
            //  未装扮
            &.no-active {
              color: #fff;
              background: #8d86d5;
            }
          }
        }
      }
    }
  }
}

//  立即许愿
.make-views {
  display: grid;
  grid-template-rows: 1fr max-content max-content;
  grid-template-columns: 100%;
  align-content: center;
  //  top
  .make-f-images {
    position: relative;
    max-width: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    margin-top: 10em;
    .custom-img {
      width: 100%;
      max-width: 100%;
      height: 86.5em;
    }
    
    .make-input {
      position: absolute;
      z-index: 99;
      .make-text {
        padding-top: 3em;
        max-height: 163em;
        max-width: 30ch;
        gap: 3em;
        color: #b68542;
        display: grid;
        grid-template-columns: repeat(2, min-content);
        .text {
          writing-mode: vertical-rl; /* 将文字竖排显示 */
          text-orientation: upright; /* 确保文字正立显示 */
          letter-spacing: 5px;
        }
      }
    }
  }
  //
  .make-c-btns {
    width: 100%;
    display: grid;
    justify-items: center;
    justify-items: center;
    .img {
      width: 27.2em;
      height: 7.7em;
    }
  }
  // xx
  .make-c-xx {
    display: grid;
    justify-items: center;
    align-items: center;
    margin-bottom: 10em;
    margin-top: 5em;
    .img {
      width: 6em;
      height: 6em;
    }
  }
}
//  输入
.change-input {
  .input-view {
    width: inherit;
    height: inherit;
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 0 3em;
    .input {
      width: 100%;
      height: 2em;
    }
  }
}


@function animatinfnc($miao_s) {
    @return  7em * $miao_s
}
.wn-deng {
  position: absolute;
  z-index: 999;
  position: absolute;

  
  .costom-img { 
      width: 3em;
      height: 3em;
      animation-name: toTopAnimation;
      animation-duration: 15s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      top: 100%;
      position: fixed;
      &:nth-child(1) {
        left: animatinfnc(3);
        animation-delay: 1s;
      }
      &:nth-child(2) {
        left: animatinfnc(5);
        animation-delay: 2s;
      }
      &:nth-child(3) {
        left: animatinfnc(6);
        animation-delay: 3s;
      }
  }
}
// audio   动画
@keyframes myAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

//  移动动画
@keyframes MoveAnimation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

//  灯笼 动画 
@keyframes toTopAnimation {
  0% {
      top: 120vh; 
  }
  30% {
    width:4em;
    height: 4em;
  }
  50% {
    width:5em;
    height: 5em;
  }
  70% {
    width:7em;
    height: 7em; 
  }
   100% {
    top: -10vh; 
  }
}
